<template>
  <div
    class="data-info"
    v-loading="loading"
  >
    <div class="condition">
      <div class="item">
        <span>状态：</span>
        <el-select
          v-model="params.status"
          style="width:80px"
        >
          <el-option
            :value="-1"
            label="全部"
          />
          <el-option
            :value="1"
            label="正常"
          />
          <el-option
            :value="0"
            label="禁用"
          />
        </el-select>
      </div>
      <div class="item">
        <span>等级：</span>
        <el-select
          v-model="params.level"
          style="width:80px"
        >
          <el-option
            :value="-1"
            label="全部"
          />
          <el-option
            :value="0"
            label="新人"
          />
          <el-option
            :value="1"
            label="初级猎人"
          />
          <el-option
            :value="2"
            label="中级猎人"
          />
          <el-option
            :value="3"
            label="高级猎人"
          />
          <el-option
            :value="4"
            label="大师级猎人"
          />
          <el-option
            :value="5"
            label="王级猎人"
          />
          <el-option
            :value="6"
            label="神话级猎人"
          />
        </el-select>
      </div>

      <el-button
        @click="searchBtn"
        type="primary"
      >查询</el-button>

    </div>
    <el-table :data="data">
      <el-table-column
        prop="mobile"
        label="手机号码"
      />
      <el-table-column
        prop="nickname"
        label="昵称"
      />
      <el-table-column
        prop="level"
        label="等级"
      >
        <template slot-scope="{row}">
          <span
            v-if="row.level==0"
            class="gray"
          >新人</span>
          <span v-else-if="row.level==1">初级猎人</span>
          <span
            v-else-if="row.level==2"
            class="green"
          >中级猎人</span>
          <span
            v-else-if="row.level==3"
            class="blue"
          >高级猎人</span>
          <span
            v-else-if="row.level==4"
            class="purple"
          >大师级猎人</span>
          <span
            v-else-if="row.level==5"
            class="orange"
          >王级猎人</span>
          <span
            v-else-if="row.level>=6"
            class="red"
          >神话级猎人</span>

        </template>
      </el-table-column>
      <el-table-column label="角色">
        <template slot-scope="{row}">
          <el-button
            type="text"
            @click="allotRole(row)"
          >查看角色</el-button>
        </template>
      </el-table-column>
      <el-table-column label="权限">
        <template slot-scope="{row}">
          <el-button
            type="text"
            @click="allotPermission(row)"
          >查看权限</el-button>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="{row}">
          <a
            class="green"
            v-if="row.status == 1"
            @click="setStatus(row.id)"
          >启用</a>
          <a
            class="red"
            @click="setStatus(row.id)"
            v-else
          >禁用</a>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button
            type="primary"
            @click="showDetail(row)"
            plain
            size="mini"
          >查看</el-button>
          <el-button
            type="warning"
            @click="resetPwd(row.id)"
            plain
            size="mini"
          >重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <page
      :total="total"
      :current.sync="params.page"
      :size.sync="params.size"
      @change="search"
    />
  </div>

</template>

<script>
import { userResetPwd, userChStatus, userLists } from "@/api";
import DatePicker from "@/components/date/picker";
import Page from "@/components/page/index";
import Detail from "./components/detail";
import PermissionPage from "./components/allot_permission";
import RolePage from "./components/allot_role";
export default {
  components: { Page, DatePicker, PermissionPage, RolePage },
  data() {
    return {
      params: {
        page: 1,
        size: 10,
        status: -1,
        level: -1
      },
      modal: {
        show: false,
        title: "",
        component: Detail,
        data: null
      },
      permissionModal: {
        show: false,
        title: "用户权限",
        component: PermissionPage,
        data: null
      },
      roleModal: {
        show: false,
        title: "用户角色",
        component: RolePage,
        width: "640px"
      },
      loading: false,
      data: [],
      total: 0
    };
  },
  created() {
    this.search();
  },
  methods: {
    search() {
      this.loading = true;
      userLists(this.params, res => {
        this.loading = false;
        this.data = res.data.data;
        this.total = res.data.total;
      });
    },
    // 搜索
    searchBtn() {
      this.params.page = 1;
      this.search();
    },
    setStatus(user_id) {
      this.loading = true;
      userChStatus(user_id, res => {
        this.loading = false;
        this.search();
      });
    },
    showDetail(user) {
      this.modal.title = "用户信息 - " + user.nickname;
      this.modal.data = user;
      this.modal.close = this.search;
      this.$uDialog(this.modal);
    },
    allotRole(row) {
      this.roleModal.title = "用户角色-" + row.nickname;
      this.roleModal.data = row;
      this.roleModal.close = this.search;
      this.$uDialog(this.roleModal);
    },
    allotPermission(row) {
      this.permissionModal.title = "用户权限-" + row.nickname;
      this.permissionModal.data = row;
      this.permissionModal.close = this.search;
      this.$uDialog(this.permissionModal);
    },
    resetPwd(user_id) {
      this.loading = true;
      this.$confirm("确定重置密码？", () => {
        this.loading = true;
        userResetPwd(
          user_id,
          res => {
            this.loading = false;
          },
          err => {
            this.loading = false;
          }
        );
      });
    }
  }
};
</script>


